<script lang="ts" setup>
interface SingleData{
  id: number;
  name: string;
  number: string;
}
interface OverviewData{
  allData: SingleData[];
  orderData:SingleData[];
}
//import { listOrder } from "../api/shop/order.js";
import {reactive, ref, toRefs} from 'vue'
import { onMounted } from 'vue';


const loading = ref(false);
import { getCashier } from '../api/shop/cashier.js'; // 导入 selectData 函数



const overviewData = reactive({
  allData: [],
  orderData: []
});
const shop=ref({
  shopId:4
})
async function fetchOverviewData() {
  loading.value = true;
  const shopId = 4;
  try {
    const data = await getCashier(shop.value); // 调用 API 获取数据
    // 假设 data 的结构与 DataVo 对应


    overviewData.allData = [
      { id: 0, name: "总订单量", number: data.data.orderNum },
      { id: 1, name: "总预约单量", number: data.data.appointedNum },
      { id: 2, name: "会员数", number: data.data.memberNum },
      { id: 3, name: "总营业额", number:data.data.totalMoney },
    ];
    overviewData.orderData = [
      { id: 1, name: "今日订单量", number: data.data.todayOrder },
      { id: 2, name: "今日金额", number: data.data.todayMoney },
      { id: 3, name: "本月订单量", number: data.data.monthOrder },
      { id: 4, name: "本月金额", number: data.data.monthMoney },
    ];
    console.log('overviewData.allData:', overviewData.allData);
  } catch (error) {
    console.error('获取收银数据失败:', error);
    alert('获取收银数据失败，请重试');
  } finally {
    loading.value = false;
  }
}
// 在组件挂载时调用 getList
onMounted(() => {
  fetchOverviewData();
});
// async function fetchData(shopId: number) {
//   try {
//     const response = await axios.get(`/shop/Cashier/selectData`, {
//       params: { shopId }
//     });
//     console.log('获取的数据:', response.data);
//     return response.data; // 返回的数据
//
//   } catch (error) {
//     console.error('获取数据失败:', error);
//     throw error; // 抛出错误以便在调用时处理
//   }
// }
// const shopData = ref(null);
// const loading = ref(false);
// const error = ref(null);

// onMounted(async () => {
//   loading.value = true;
//   try {
//
//     const data = await fetchData(4); // 假设 shopId 是 1
//     shopData.value = data; // 将返回的数据存储在响应式变量中
//
//   } catch (err) {
//     error.value = '获取数据失败';
//   } finally {
//     loading.value = false;
//   }
// });

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const value2 = ref('')


const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// const OverviewData =ref <OverviewData>({
//   allData: [
//     {
//       id: 0,
//       name: "总订单量",
//       number: "",
//     },
//     {
//       id: 1,
//       name: "总预约单量",
//       number: "",
//     },
//     {
//       id: 2,
//       name: "会员数",
//       number: "",
//     },
//     {
//       id: 3,
//       name: "总营业额",
//       number: "",
//     },
//   ],
//   orderData: [
//     {
//       id: 1,
//       name: "今日订单量",
//       number: "264",
//     },
//     {
//       id: 2,
//       name: "累计金额",
//       number: "262424",
//     },
//     {
//       id: 3,
//       name: "本月订单量",
//       number: "245464",
//     },
//     {
//       id: 4,
//       name: "累计金额",
//       number: "26542454",
//     },
//   ],

// })
// const orderlist = ref([]);
// const loading = ref(false);
//
// const data = reactive({
//   form: {},
//   queryParams: {
//     pageNum: 1,
//     pageSize: 10000,
//     userId:null,
//     userName: null,
//     paymoney: null,
//     paymentType: null,
//     orderStart: null,
//     orderOver: null,
//     orderPause: null,
//     serviceName: null,
//     orderStatus: null,
//     couponId: null,
//     couponPrice: null,
//     payStatus:null,
//     payTime: null,
//     shopName: null,
//     employeeId: null,
//     creatTime:null,
//   },
// });
//
// const { queryParams, form } = toRefs(data);
//
// async function getList() {
//   loading.value = true;
//   try {
//     const response = await listOrder(queryParams.value);
//     orderlist.value = response.rows;
//
//     // 假设 orderlist 中每个订单对象都有 price 字段
//     if (orderlist.value.length > 0) {
//       // 计算总订单量
//       const totalAmount = orderlist.value.reduce((sum, order) => sum + order.paymoney, 0);
//       const totalOrders = orderlist.value.length; // 订单数量
//       OverviewData.value.allData[0].number = totalOrders.toString(); // 总订单量
//
//       // 更新总预约单量
//       OverviewData.value.allData[1].number = orderlist.value.length.toString(); // 总预约单量
//
//       // 更新其他字段（如果需要）
//       //计算会员数和总营业额
//       OverviewData.value.allData[2].number = "100"; // 假设会员数为100
//
//       OverviewData.value.allData[3].number = totalAmount.toString(); // 总营业额可以与总订单量相同
//
//     } else {
//       // 如果没有订单，重置数据
//       OverviewData.value.allData.forEach(item => item.number = "0");
//     }
//
//     console.log(loading.value);
//   } catch (error) {
//     console.error('获取服务列表失败:', error);
//     alert('获取服务列表失败，请重试');
//   } finally {
//     loading.value = false;
//   }
// }
// import { onMounted } from 'vue';
//
// onMounted(() => {
//   getList();
// });
const handleDateChange = async (dates: [Date, Date]) => {
  if (dates && dates.length === 2) {
    const [startDate, endDate] = dates;

    // 更新 queryParams 中的日期范围
    data.queryParams.orderStart = startDate.toISOString();
    data.queryParams.orderOver = endDate.toISOString();

    console.log('日期范围:', data.queryParams.orderStart, data.queryParams.orderOver); // 调试信息


    // 调用 getList 函数以根据新的日期范围获取数据
    await getList();
  }
};

</script>

<template>
  <div id="overview">
    <div class="userinfo">
    <el-avatar
      scr=""
    />
      <span class="username">xxx</span>

      <div class="demo-date-picker">
        <div class="block">

          <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="To"
              start-placeholder="起始时间"
              end-placeholder="结束时间"
              :size="size"
              @change="handleDateChange"
          />

        </div>
      </div>

      </div>
    <div id="overview">
      <div class="overview-list">
        <div class="overview-item" v-for="item in overviewData.allData" :key="item.id">
          <div class="title">{{ item.name }}</div>
          <div class="number">{{ item.number }}</div>
        </div>
      </div>
      <div class="overview-list">
        <div class="overview-item" v-for="item in overviewData.orderData" :key="item.id">
          <div class="title">{{ item.name }}</div>
          <div class="number">{{ item.number }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#overview{
  .userinfo{
    display: flex;
    align-items: center;
    .username{
      margin-left: 10px;
    }
  }
  .demo-date-picker {
    display: flex;
    width: 10px;
    padding: 10px;
    flex-wrap: wrap;

  }




  .overview-list{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    .overview-item{
      width:22%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: var(--el-box-shadow-light);
      border-radius: 10px;
      padding: 20px;

      .title{
        font-weight: 600;
        margin-bottom: 10px;
      }
.number{
  font-size: 18px;
}
    }
  }
}



</style>




































